<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('摄像头信息列表')" />
    <!--<th:block th:include="include :: layui-css" />-->
	<style>
        .pic-list{
            /* display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 20px;
            padding-top: 15px; */
            /* display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill, 250px);
            grid-gap: 10px; */
        }
        /* .pic-list img:last-child {
            margin-right: auto;
		} */
		/* .pic-list img{
			width: 250px;
			height:180px;
            cursor: pointer;
            margin-top:10px;
		} */
        .hide{
            display: none;
        }
        .camer_card_li .ibox{
            min-height: 270px;
        }
        /* .pic-carousel-out{
            overflow-y:visible !important;
        } */
        .pic-modal ::-webkit-scrollbar {display:none !important}
        .pic-carousel-out img{
            /* width:100%; */
            height:100%;
            display: block;
            margin:0 auto;
        }
        .pic-carousel-out label { /*flex布局让子元素水平垂直居中*/
            display: flex;
            align-items: center;
            justify-content: center;
        }
        input[type=radio] {
            -webkit-appearance: none;
            appearance: none;
            outline: none;
            width: 12px;
            height: 12px;
            cursor: pointer;
            vertical-align: center;
            background: #fff;
            border: 1px solid #ccc;
            position: relative;
            margin-right: 5px;
        }
        input[type=radio]:checked::after {
            content: "";
            display: block;
            position: absolute;
            outline: none;
            top: 2px;
            left: 2px;
            right: 0;
            bottom: 0;
            width: 6px;
            height: 6px;
            background-color: rgb(53, 151, 216);
        }
        input[type=radio]:focus{
            outline: none;
        }
        input[type=radio], input[type=radio]:checked::after {
            border-radius: 50%;
        }
        .layui-layer-btn-c{
            text-align: center !important;
        }
        #pic-page{
            display: flex;
            justify-content: center;
            /* margin-top: 15px; */
        }
        .mb-10{
            margin-bottom: 10px;
        }
        .flex-between{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<!-- <li>
								摄像头编码：<input type="text" name="code"/>
							</li>

							<li>
								摄像头名字：<input type="text" name="name"/>
							</li>

							<li>
								产品型号：<input type="text" name="productName"/>
							</li>

							<li>
								摄像头ip：<input type="text" name="ip"/>
							</li>

							<li>
								摄像头账号：<input type="text" name="account"/>
							</li>

							<li>
								摄像头密码：<input type="text" name="password"/>
							</li>

							<li>
								使用的算法：<input type="text" name="process"/>
							</li>

							<li>
								灵敏度（1， 2， 3）：<input type="text" name="level"/>
							</li>

							<li>
								告知方式(0-app,1-邮件)：<input type="text" name="ways"/>
							</li>

							<li>
								功能(0-入侵，待定)：<input type="text" name="function"/>
							</li>

							<li>
								创建时间：<input type="text" name="createTime"/>
							</li>

							<li>
								开始时间：<input type="text" name="startTime"/>
							</li>

							<li>
								结束时间：<input type="text" name="endTime"/>
							</li> -->

							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
								<a class="btn btn-success btn-rounded btn-sm" onclick="$.operate.add()" shiro:hasPermission="door:aiCamera:add"><i class="fa fa-plus"></i> 添加</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
	        <div class="btn-group-sm hide" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="door:aiCamera:add">
					<i class="fa fa-plus"></i> 添加
				</a>
				<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="door:aiCamera:edit">
					<i class="fa fa-edit"></i> 修改
				</a>
				<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="door:aiCamera:remove">
					<i class="fa fa-remove"></i> 删除
				</a>
				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="door:aiCamera:export">
						<i class="fa fa-download"></i> 导出
				 </a>
			</div>
			<div class="col-sm-12 select-table table-striped hide">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
			<div class="col-sm-12 search-collapse camer_card_ul" style="background: #dfdfdf;">
				<div class="col-sm-12 pic-list"></div>
                <div class="col-sm-12" id="pic-page"></div>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('door:aiCamera:edit')}]];
        var removeFlag = [[${@permission.hasPermi('door:aiCamera:remove')}]];
        var prefix = ctx + "door/aiCamera";
		// 全局变量
		var picList=[];//摄像头列表
		var pageSize=10;//每页条数
		var pageNum=1;//当前页数
		var isAsc='desc';//升序降序

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
                modalName: "摄像头信息",
		        showExport: true,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'id', 
					title : '摄像头id',
					visible: false
				},
				{
					field : 'code', 
					title : '摄像头编码',
					sortable: true
				},
				{
					field : 'name', 
					title : '摄像头名字',
					sortable: true
				},
				{
					field : 'productName', 
					title : '产品型号',
					sortable: true
				},
				{
					field : 'ip', 
					title : '摄像头ip',
					sortable: true
				},
				{
					field : 'account', 
					title : '摄像头账号',
					sortable: true
				},
				{
					field : 'password', 
					title : '摄像头密码',
					sortable: true
				},
				{
					field : 'process', 
					title : '使用的算法',
					sortable: true
				},
				{
					field : 'level', 
					title : '灵敏度（1， 2， 3）',
					sortable: true
				},
				{
					field : 'ways', 
					title : '告知方式(0-app,1-邮件)',
					sortable: true
				},
				{
					field : 'function', 
					title : '功能(0-入侵，待定)',
					sortable: true
				},
				{
					field : 'createTime', 
					title : '创建时间',
					sortable: true
				},
				{
					field : 'startTime', 
					title : '开始时间',
					sortable: true
				},
				{
					field : 'endTime', 
					title : '结束时间',
					sortable: true
				},
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
						return actions.join('');
		            }
		        }]
            };
            $.table.init(options);
			getListCam();
        });

		// 获取摄像头列表信息
		function getListCam(){
			$.ajax({
				type:"post",
				url: prefix + "/list",
				data:getQueryParams(),
				success:function (data) {
					$(".pic-list").html(''); 
					picList=data.rows;
					for(var i=0,j=picList.length;i<j;i++){
						$(".pic-list").append(`
							<div class="col-sm-4 camer_card_li">
								<div class="ibox">
									<div class="ibox-title flex-between">
										<!-- <span class="label label-primary pull-right">NEW</span> -->
										<h5 class="font-bold">${picList[i].name?picList[i].name:'-'}</h5>
										<div class="btn-group">
											<button type="button" class="btn btn-warning btn-sm" style="margin-right: 10px;">
												告警
												<span class="layui-badge">9</span>
											</button>
											<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle btn-sm">操作 <span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="javascript:;">播放</a></li>
												<li><a href="javascript:;">修改</a></li>
												<li class="divider"></li>
												<li><a href="javascript:;">删除</a>
												</li>
											</ul>
										</div>
									</div>
									<div class="ibox-content">
										<div class="row  m-t-sm">
											<div class="col-sm-3 mb-10">
												<div class="font-bold">功能</div>
												<span>${picList[i].function==0?'入侵':'待定'}</span>
											</div>
											<div class="col-sm-9 mb-10">
												<div class="font-bold">布防时间</div>
												<span>${picList[i].startTime?picList[i].startTime:'-'}至${picList[i].endTime?picList[i].endTime:'-'}</span>
											</div>
											<div class="col-sm-3 mb-10">
												<div class="font-bold">灵敏度</div>
												<span>${picList[i].level==null?'-':(picList[i].level==1?'低':(picList[i].level==2?'中':'高'))}</span>
											</div>
											<div class="col-sm-9 mb-10">
												<div class="font-bold">通知方式</div>
												<span>${picList[i].ways==0?'app':'邮件'}推送</span>
											</div>
											<div class="col-sm-6">
												<div class="font-bold">IP</div>
												<span>${picList[i].ip?picList[i].ip:'-'}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						`);
					}
					setCamPage(data.total);
				}
			});
		}

        // 分页设置
        function setCamPage(total){
            layui.use('laypage', function(){
                var laypage = layui.laypage;
                
                laypage.render({
                    elem: 'pic-page' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: total ,//数据总数，从服务端得到
                    jump: function(obj, first){
                        pageSize=obj.limit;
                        pageNum=obj.curr;
                        //首次不执行
                        if(!first){
						//do something
							getListCam();
                        }
                    }
                });
            });
            var marTop=$(".table-striped").height()-$(".pic-list").height()-55;
            if(marTop<15){
                $("#pic-page").attr('style','margin-top:15px');
            }else{
                $("#pic-page").attr('style','margin-top:'+marTop+'px')
            }
        }

		// 获取查询信息
		function getQueryParams(){
			var data={};
			data.pageSize=pageSize;
			data.pageNum=pageNum;
			data.isAsc=isAsc;
			// data.createTime=$("#createTime").val();
			// data.endTime=$("#endTime").val();
			return data
		}

    </script>
</body>
</html>